<template>
  <div
    id="course-reach"
    class="course-reach"
  >
    <div class="my-tab">
      <div
        class="my-tab-wrap"
        ref="mytab"
      >
        <div class="all-tab">
          <div
            v-for="(item, index) in labels"
            :key="index"
            :class="{active: active === index}"
            @click="setCourseId(item.id,index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        v-if="labels.length > 4"
        class="tab-left"
        @click="scrollLeft"
      ></div>
      <div
        v-if="labels.length > 4"
        class="tab-right"
        @click="scrollRight"
      ></div>
    </div>
    <div class="box">
      <div class="btn-area">
        <el-button
          class="flex-r"
          type="primary"
          @click="openDialog(1)"
        >
          <el-icon>
            <CirclePlus />
          </el-icon>
          添加达成度
        </el-button>
      </div>
      <div class="list">
        <ul v-if="list.length">
          <li
            v-for="(item,index) in list"
            :key="item.id"
            @click="$router.push({ name: 'zonghedetails', params: { id: item.id }})"
          >

            <div class="item-box">
              <div class="z-left">
                <div :class="'icon' + item.iconValue">
                  <img :src="'/teachStatic/images/' + item.iconValue + '.png'">
                </div>
              </div>
              <div class="z-right">
                <el-tooltip
                  v-if="item.name.length > 12"
                  class="item"
                  effect="dark"
                  :content="item.name"
                  placement="top"
                >
                  <div class="title">{{ item.name }}</div>
                </el-tooltip>
                <div
                  v-else
                  class="title"
                >{{ item.grade }}级{{ item.name }}</div>
                <div class="student-num">学生人数：{{ item.studentCount }}人</div>
                <div class="person">负责人：{{ item.principal }}</div>
              </div>

              <span
                class="copy"
                @click.stop="openDialog(2, item)"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="bottom-start"
                >
                  <template #content>
                    <div>注：点击复制按钮，可复制当前达成度统计的课程目标信息，考核项信息。<br />不复制学生信息、成绩信息、统计信息。</div>
                  </template>
                  <el-icon>
                    <DocumentCopy />
                  </el-icon>
                </el-tooltip>

              </span>
              <span
                class="remove"
                @click.stop="remove(index, item.id)"
              >
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </div>
          </li>
        </ul>
        <div
          v-else
          class="no-source"
        >
          <img src='@/assets/img/empty.png' />
          <p>暂无课程达成度</p>
        </div>
      </div>
    </div>
    <setDialog
      @refresh="refresh"
      ref="setDialog"
    />

    <tipsDialog
      ref="tipsDialog"
      @sure="callBack"
    />
  </div>
</template>
<script>
import tipsDialog from "@/components/tipsDialog.vue";
import {
  courseReachList,
  delCourseReach,
  getCourseId,
} from "@/api/courseReach";
import setDialog from "./component/dialog.vue";
export default {
  components: {
    setDialog,
    tipsDialog,
  },
  data() {
    return {
      courseId: "",
      active: 0,
      labels: [],
      list: [],
      removeId: null,
      removeIndex: null,
    };
  },
  created() {
    this.getCourseId();
    // this.courseId = localStorage.getItem("setCourseId");
    //先写死
    // this.courseId = 217;
  },
  methods: {
    init(courseId) {
      courseReachList({ courseId }).then((res) => {
        const { data } = res;
        this.list = data;
        localStorage.setItem("REACHLIST", JSON.stringify(data, ["id", "name"]));
      });
    },
    scrollLeft() {
      const stepBox = this.$refs.mytab;
      stepBox.scrollBy({
        left: -200,
        behavior: "smooth",
      });
    },
    scrollRight() {
      const stepBox = this.$refs.mytab;
      console.log(stepBox);
      stepBox.scrollBy({
        left: 200,
        behavior: "smooth",
      });
    },
    getCourseId() {
      getCourseId({}).then((res) => {
        this.labels = res.data;
        console.log(this.$route.query.courseId, "courseId");
        const courseId = this.$route.query.courseId;
        console.log(this.labels, "labels");
        if (courseId) {
          const index = this.labels.findIndex((item) => item.id == courseId);
          this.setCourseId(courseId, index);
        } else {
          this.setCourseId(this.labels[0].id, 0);
        }
        // this.setCourseId(this.labels[0].id, 0);
        console.log(res.data, "couresid");
      });
    },
    setCourseId(id, index) {
      console.log(123123);
      localStorage.setItem("setCourseId", id);
      this.courseId = id;
      this.active = index;
      this.init(this.courseId);
    },
    openDialog(type, item) {
      this.$refs.setDialog.init(type, item, this.courseId);
    },

    refresh() {
      this.init(this.courseId);
    },

    remove(index, id) {
      console.log(id, "remove");
      this.removeIndex = index;
      this.removeId = id;
      this.$refs.tipsDialog.init({
        type: "error",
        info: "是否删除选中",
      });
    },

    callBack() {
      delCourseReach({ id: this.removeId }).then((res) => {
        this.list.splice(this.removeIndex, 1);
        localStorage.setItem(
          "REACHLIST",
          JSON.stringify(this.list, ["id", "name"])
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#course-reach {
  .my-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 33px;
    .all-tab {
      margin-bottom: 0;
      border-bottom: 0;
      > div {
        font-synthesis: none;
        font-weight: normal;
        flex-shrink: 0; /* 防止标签被压缩 */
        padding: 0 16px;
      }
    }
    .my-tab-wrap {
      flex: 1;
      overflow-x: hidden;
      border-bottom: 1px solid #ced8ee;
    }
    .tab-left {
      position: absolute;
      left: -20px;
      width: 10px;
      height: 20px;
      background: url("@/assets/img/tab-left.png") no-repeat 0 0;
      transform: translateY(-8px);
      cursor: pointer;
      &:hover {
        background: url("@/assets/img/tab-left-hover.png") no-repeat 0 0;
      }
    }
    .tab-right {
      position: absolute;
      right: -20px;
      width: 10px;
      height: 20px;
      background: url("@/assets/img/tab-right.png") no-repeat 0 0;
      transform: translateY(-8px);
      cursor: pointer;
      &:hover {
        background: url("@/assets/img/tab-right-hover.png") no-repeat 0 0;
      }
    }
  }
  .icon1,
  .icon2,
  .icon3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    img {
      width: 52px;
    }
  }

  .icon1 {
    background: #5c75da;
  }

  .icon2 {
    background: #fe806d;
  }

  .icon3 {
    background: #36cac6;
  }

  .el-icon-circle-plus-outline {
    font-size: 16px;
    vertical-align: inherit;
  }

  .btn-area {
    span {
      vertical-align: middle;
    }
  }
}
</style>
<style lang="scss" scoped>
#course-reach {
  margin: 0 auto;
  .box {
    .btn-area {
      overflow: hidden;
    }
    .flex-r {
      float: right;
    }
    .list {
      margin-top: 15px;
      ul {
        padding: 0;
      }
      li {
        overflow: hidden;
        display: inline-block;
        width: calc(33.33% - 14px);
        height: 130px;
        background: #ffffff;
        box-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
        margin-right: 20px;
        margin-bottom: 20px;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:hover {
          transform: translateY(-10px);
          box-shadow: 0px 6px 40px 0px rgba(0, 0, 0, 0.2);
          .copy,
          .remove {
            display: block;
          }
        }
      }

      .item-box {
        display: flex;
        height: 100%;
        align-items: center;
        position: relative;
        .z-left {
          width: 110px;
          height: 100%;
          text-align: center;
          line-height: 130px;
          flex-shrink: 0;
        }

        .z-right {
          position: relative;
          flex: 1;
          margin-left: 20px;
          .title {
            color: #3a3a3a;
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 22px;
            word-break: break-word;
            white-space: nowrap;
            word-wrap: break-word;
            text-overflow: ellipsis;
            width: 70%;
            overflow: hidden;
          }

          .student-num,
          .person {
            font-size: 14px;
            font-weight: 400;
          }

          .person {
            margin-top: 10px;
          }
        }

        .copy,
        .remove {
          display: none;
          position: absolute;
          height: 18px;
          width: 18px;
          bottom: 10px;
          &:hover {
            i {
              color: #1277eb;
            }
          }
          i {
            font-size: 18px;
            color: #0f5576;
          }
        }

        .remove {
          right: 10px;
        }

        .copy {
          right: 38px;
        }
      }

      .no-source {
        text-align: center;
        padding: 100px 0;
        p {
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
